import { useContext, useEffect, useState } from 'react'

import Columnsitem from "../../../components/columnsitem/index.jsx"
import { Coxt } from '../../home/index.jsx'

import './index.css'

export default function () {

    // data

    let { iffoldmenu } = useContext(Coxt)
    const [nick, setnick] = useState('glbolamamanda sudimali')//给他差不多20个字符的名字
    const [ifrestfontsize, setifresetfontsize] = useState(0)

    // methods

    let setdom = function () {
        var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
        width < 635 ? setifresetfontsize(() => 1) : setifresetfontsize(() => 0)
        window.addEventListener('resize', () => {
            width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
            width < 635 ? setifresetfontsize(() => 1) : setifresetfontsize(() => 0)
        })
    }

    // mounted / update

    useEffect(() => {
        setdom()
    }, [])

    useEffect(() => {

    }, [iffoldmenu])

    useEffect(() => {

    }, [nick])


    return (
        <div className='personal-router'>
            <div className={iffoldmenu ? 'head-info-bg' : "head-info-bg2"}></div>
            <div className='head-info'>
                <div className='heads'></div>
                <div className='infos'>
                    <div className='infos-nick' style={{ fontSize: ifrestfontsize == 0 ? '30px' : nick.length > 12 && nick.length < 16 ? '24px' : nick.length > 16 ? '16px' : '30px' }}>{nick}</div>
                    <div className='infos-desc'>个人描述</div>
                </div>
                <div style={{ clear: 'both' }}></div>
            </div>
            <div className='second-userinfo'>
                <div className='userinfo-item'>
                    <div>200万</div>
                    <div>粉丝</div>
                </div>
                <div className='userinfo-item'>
                    <div>200万</div>
                    <div>投稿</div>
                </div>
                <div className='userinfo-item'>
                    <div>200万</div>
                    <div>点赞</div>
                </div>
                <div style={{ clear: 'both' }}></div>
            </div>
            <div className='infochange'>
                <button className={iffoldmenu ? 'infochangebutton infochangebutton-fold' : 'infochangebutton'}>编辑资料</button>
            </div>
            {/* // */}
            <div className='info-uploadbackup-title' style={{ maxWidth: 'none' }}>
                <div className='info-uploadbackup-title' style={{ margin: 0, padding: 0, border: 'none' }}>
                    <div className='info-ub-titleitem'>发布</div>
                    <div className='info-ub-titleitem'>收藏</div>
                </div>
            </div>
            <div>
                {
                    [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map((item) => {
                        return <Columnsitem key={item} search="1" />
                    })
                }
                <div style={{ clear: 'both' }}></div>
            </div>
        </div>
    )
}